<template>
	<section class="lottery-help" v-if="data">
		<loadmore :top-method="refresh" :bottom-all-loaded="allLoaded" ref="loadmore">
			<div class="lottery-help-top">
				<div class="layout-juscon ml30rem mr30rem pt40rem pb40rem">

					<img class="list-left mr20rem" :src="img_url+data.uicon" alt="">

					<div class="list-mid flex_1 layout-juscon flex-column ml20rem">
						<p class="ellipsis fs32rem">{{ data.uname }}</p>
						<div class="list-mid-bottom layout-juscon">
							<p class="flex-center fs24rem">免费获得该商品，帮我获得幸运值</p>
						</div>
					</div>
					<div class="list-right">
						<p class="fs26rem pl20rem pr20rem pt5rem pb5rem" @click="rulesShow = true">活动规则</p>
					</div>
				</div>
			</div>
			<div class="lottery-help-product">
				<router-link tag="div" :to="'/detail/activity-detail/'+ data.goods_id" class="layout-juscon ml30rem mr30rem pt25rem pb25rem">
					<img class="list-left" :src=" img_url+data.gimg " alt="">
					<div class="list-mid flex_1 layout-juscon flex-column ml30rem c53">
						<p class="ellipsis-more fs32rem c333">{{ data.gname }}</p>
						<div class="list-mid-pirce fs34rem flex">
							<strong class="cxo-red-color">￥{{ data.price }}</strong><del class="fs24rem flex-center ml20">原价{{ data.market_price }}元</del>
						</div>
						<div class="list-mid-bottom layout-juscon">
							<p class="flex-center fs24rem">总共{{ data.stock }}份</p>
						</div>
					</div>
				</router-link>
			</div>
			<div class="lottery-help-people pt70rem pb70rem ml30rem mr30rem">
				<p class="fs24rem align-center mb40rem">已收集<i class="cxo-red-color">{{ data.tmp_luck }}</i> 幸运值，排名第<i class="cxo-red-color">{{ data.rank }}</i>名</p>
				<button v-if="!fuid" class="cxo-red seek fs32rem white align-center mb20rem" @click="shareShow = true">{{ data.button_txt }}</button>
				<button v-if="fuid" class="cxo-red seek fs32rem white align-center mb20rem" @click="helpSubmit">{{ data.button_txt }}</button>
				<router-link tag="button" class="cxo-red seek fs32rem white align-center mb20rem" to="/detail/share-list?type=-4" v-if="fuid">我要参与
				</router-link>
				<p class="fs24rem align-center">距离获得结束还有</p>
				<countdown :data="data.endtime" class="mb30rem" v-if="data.endtime" :type="countdownType"></countdown>
				<p class="fs24rem align-center">活动结束前幸运值排在前<i class="cxo-red-color">{{ data.entry_num }}</i>名的用户，都可免费获得</p>
			</div>
			<h3 class="fs26rem c53 ml30rem mb30rem bold">帮TA收集幸运值的好友</h3>
			<ul class="help-people-box mb60rem" v-if="friendData.length > 0">
				<li class=" ml25rem mr35rem pt25rem pb25rem" v-for="item in friendData">
					<div class="flex-left">
						<img class="list-left circle" style="width:3rem;height:3rem;" :src=" img_url+item.u_icon " alt="">
						<div class="layout border-b flex_1 pb10rem ml20rem">
							<div>
								<h5 class="fs32rem mt5rem bold">{{ item.u_name }}</h5>
								<p class="mt10rem fs22rem">增加<span class="red">{{ item.luckynum }}</span>幸运值</p>
							</div>
							<p class="fs24rem">{{ item.time * 1000,"yyyy.MM.dd  hh:mm" | formatDate }}</p>
						</div>
					</div>
				</li>
				<p class="fs26rem align-center cxo-red-color mt30rem" @click="moreFriend = true;">查看更多</p>
			</ul>
			<ul class="help-people-box mb60rem" v-else>
				<p class="align-center fs26rem mr20rem">暂无好友助力</p>
				<span class="block align-center mt20rem">╮(╯﹏╰)╭</span>
				<!-- <p class="fs26rem align-center cxo-red-color mt30rem" @click="moreFriend = true;">查看更多</p> -->
			</ul>
			<div class="new-recommend">
				<h3 class="product-title layout align-center"> 
					<p class="layout">
						<i class="rhombus rhombus-son"></i>
						<i class="rhombus ml15rem"></i>
					</p>
					<strong class='fs34rem c333 bold'>更多新品推荐</strong>
					<p class="layout">
						<i class="rhombus mr15rem"></i>
						<i class="rhombus rhombus-son"></i>
					</p>
				</h3>
				<recommend-list></recommend-list>
			</div>
			<div class="help-share" v-show="shareShow" @click="shareShow = false">
				<ul class="flex-left pt30rem pb30rem" v-if='isiOS'>
					<li @click="share('wechat')">
						<i class="iconfont icon-weixin1 wechat auto"></i>
						<span>微信</span>
					</li>
					<li @click="share('friends')">
						<i class="iconfont icon-pengyouquan circle auto"></i>
						<span>朋友圈</span>
					</li>
					<!-- <li>
						<i class="iconfont icon-qq qq"></i>
						<span>QQ</span>
					</li>
					<li>
						<i class="iconfont icon-weibo weibo"></i>
						<span>微博</span>
					</li> -->
				</ul>
				<img src="../../../assets/share.png" alt="" style="pointer-events: none;" v-else>
			</div>
			<div class="my-lotterty-box flexcenter" v-show="false">
				<div class="my-lotterty">
					<i class="iconfont icon-guanbi"></i>
					<!-- <div class="status-img">
						<img src="../../../assets/lose.png" alt="">
						<img src="../../../assets/success.png" alt="">
					</div> -->
					<h2 class="fs30rem pb30rem pt30rem">幸运助力免单规则</h2>
					<p class="pl30rem pr30rem pt30rem pb30rem">
						幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明。
					</p>
				</div>
			</div>
			<div class="my-lotterty-box flexcenter" v-show="moreFriend">
				<div class="my-lotterty">
					<i class="iconfont icon-guanbi" @click="moreFriend = false"></i>
					<h2 class="fs30rem pb30rem pt30rem">好友详情</h2>
					<ul>
						<li class="flex-left ml25rem mr35rem pt25rem pb25rem" v-for="item in friendData">
							<img class="list-left" :src=" img_url+item.u_icon " alt="">
							<div class="list-mid flex layout ml30rem pb10rem border-b">
								<div class="list-mid-bottom">
									<p class="ellipsis fs32rem bold" style="width:8rem;">{{ item.u_name }}</p>
									<p class="mt10rem fs22rem">增加<span class="red">{{ item.luckynum }}</span>幸运值</p>
								</div>
								<p class="fs24rem">{{ item.time * 1000,"yyyy.MM.dd  hh:mm" | formatDate }}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>

			<div class="my-lotterty-box flexcenter" v-show="rulesShow" v-if="data.rules">
				<div class="my-lotterty">
					<i class="iconfont icon-guanbi" @click="rulesShow = false"></i>
					<!-- <div class="status-img">
						<img src="../../../assets/lose.png" alt="">
						<img src="../../../assets/success.png" alt="">
					</div> -->
					<h2 class="fs30rem pb30rem pt30rem">{{ data.rules.title }}</h2>
					<div class="pl30rem pr30rem pt30rem pb30rem" v-html="data.rules.content">
						<!-- 幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明，幸运助力免单规则说明。 -->
					</div>
				</div>
			</div>
			<div class="wechatCode" v-if="codeShow" @click="codeShow = !codeShow">
				<div class="box" v-if='codeUrl'>
					<p class="bg-white pt30rem pb30rem pl30rem pr30rem fs32rem align-center">请长按二维码识别关注公众号，享受更多体验机会</p>
					<img class="responsive-img" :src="codeUrl" alt="">
				</div>
			</div>

		</loadmore>
<share-footer></share-footer>
	</section>

</template>

<script>
	import { getShareIndex, getFriendShareList, getShareLink, getClickHelpShare, getWechatConfig,wechatCode,getWchatPublicLogin } from '@/api/goods-detail';
	import Countdown from '@/components/Countdown';
	import $toast from '@/utils/toast';
	import { formatDate,iosapp } from '@/utils';
	import RecommendList from '@/components/recommend-list';
	import { Loadmore } from 'mint-ui';
    import ShareFooter from "../../../components/Share-footer";
	export default{
		components:{
            ShareFooter,
            Countdown,
			RecommendList,
			Loadmore
		},
		data()
		{
			return{
				isiOS         : window.sessionStorage.getItem('isapp'),
				uid           : window.localStorage.getItem('uid'),
				goods_id      : this.$route.query.goodsId,
				parent_id     : this.$route.query.uid,//获取分享链接的uid用于返回给后台
				class_type    : this.$store.state.class_id,//-2:幸运助力  -3：免费抽奖   -4：分享有礼
				address_id    : this.$store.state.address_id,
				fuid          : this.$route.query.fuid,//获取分享链接上的fuid用于渲染上级用户数据
				img_url       : process.env.IMG_URL,
				wechatConfig  : [],
				share_info    : [],
				recommand     : [],
				friendData    : [],
				data          : [],
				countdownType : true,
				moreFriend    : false,
				rulesShow     : false,
				shareShow     : false,
				codeShow      : false,
				allLoaded     : false,
				type          : 3,//活动类型 1：幸运助力 2：免费抽奖 3：分享有礼
				page_index    : 1,
				page_size     : 4,
			}
		},
		created()
		{
			this.loadData();
			this.loadPeople();
			this.getConfig();
			// if(this.$route.query.fuid &&!this.$route.query.uid)
			// 	location.href = 'https://fish.qidongwx.com/service/Thirdlogin/wchatPublicLogin?fuid=' + this.fuid +'&goods_id='+ this.goods_id +'&type=3';

			if(this.$route.query.uid)
				window.localStorage.setItem('uid',this.$route.query.uid)
		},
		filters:
 		{
			formatDate(time, fmt)
			{
				let date = new Date(time);
				return formatDate(date,fmt)
			}
		},
		methods:
		{
			refresh()
			{
				this.page_index = 1,
				this.loadData();
				this.loadPeople();
				setTimeout(()=>{
					// this.allLoaded = true;
					this.$refs.loadmore.onTopLoaded();
				},1000)
			},
			loadData()
			{
				let params ={
					goods_id   : this.goods_id,
					address_id : this.address_id,
					uid        : this.fuid ? this.fuid : this.uid,
				};
				getShareIndex(params).then(res =>{
					this.time = res.data.endtime;
					this.parent_id = res.data.uid;
					this.data = res.data;
				});
			},
			loadPeople()
			{
				console.log(123)
				let paramsFriend = {
					uid      : this.fuid ? this.fuid : this.uid,
					goods_id : this.goods_id,
					type     : this.type,
					page     : this.page_index,
					item     : this.page_size,
				}
				getFriendShareList(paramsFriend).then(res =>{
					if(res.data.length > 0)
						this.friendData = res.data;
				})
			},
			//获取微信config
			getConfig()
			{
				let url = location.href.split('#')[0] //获取锚点之前的链接
				getWechatConfig(url).then(response => {
			        let res = response.data;
			        this.helpShare(res);
		        });
			},
			//分享获取分享标题、链接、图片
			helpShare(resData)
			{
				wx.config({
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: resData.appId, // 必填，公众号的唯一标识
				    timestamp: resData.timestamp, // 必填，生成签名的时间戳
				    nonceStr: resData.nonceStr, // 必填，生成签名的随机串
				    signature: resData.signature,// 必填，签名
				    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
				});
				let paramsLike = {
					uid      : this.fuid ? this.fuid : this.uid,
					goods_id : this.goods_id,
					type     : this.type,
				}
				getShareLink(paramsLike).then(res =>{
					console.log(res)
					let url = location.href.split('#')[0];
					let links = res.data.link;
			        let title = res.data.title;
			        let desc = res.data.content;
			        let imgUrl = res.data.img;
				
					wx.ready(()=>{
						wx.onMenuShareTimeline({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {
				              	alert("分享到朋友圈成功")
				            },
				            cancel: function() {
				              	alert("分享失败,您取消了分享!")
				            }
				          });
				          //微信分享菜单测试
				          wx.onMenuShareAppMessage({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {

							},
							cancel: function() {
								
							}
						});
					})
				});
			},
			helpSubmit()
			{
				if(this.data.button_state == 0) return;

				//帮助好友分享
				if(this.$route.query.uid)
				{
					if(this.$route.query.sub == 0){
						let paramCode = {
							fuid     : this.$route.query.fuid,
							uid      : this.$route.query.uid,
							goods_id : this.goods_id,
							type     : 3
						}
						wechatCode(paramCode).then(res =>{
							this.codeUrl = res.data.qrcode;
							this.codeShow = true;
						})
					}
					else
					{
						
						let paramsHelpBtn = {
							uid       : this.$route.query.uid,
							parent_id : this.fuid,
							goods_id  : this.goods_id,
							type      : this.type,
						}
						getClickHelpShare(paramsHelpBtn).then(res =>{
							this.loadData();
							this.loadPeople();
							$toast(res.msg);
						})
					}
				}
				else
				{

					// let paramsLogin = {
					// 	fuid     : this.fuid,
					// 	goods_id : this.goods_id,
					// 	type     : 3
					// }
					// getWchatPublicLogin(paramsLogin).then(res =>{
					// 	if(this.$route.query.sub == 1){
					// 		this.codeShow = true;
					// 		let paramCode = {
					// 			fuid     : this.fuid,
					// 			uid      : this.$route.query.uid,
					// 			goods_id : this.goods_id,
					// 			type     : 3
					// 		}
					// 		wechatCode(paramCode).then(res =>{
					// 			this.codeUrl = res.data.qrcode;
					// 		})
					// 	}
					// })
				}

			},
			share(name)
			{
				let params = {
					uid      : this.fuid ? this.fuid : this.uid,
					goods_id : this.goods_id,
					type     : this.type,
					iOSCode  : 'rewardShareLink'
				}
				if(name == 'wechat')
					iosapp('shareWechat',params)
				else
					iosapp('shareFriends',params)
			}
		}
	}
</script>

<style lang="less">
.lottery-help
{
	.lottery-help-top
	{
		background: #fff;
		img
		{
			width: 85/28rem;
			height: 85/28rem;
			border-radius: 50%;
			object-fit: cover;
		}
		.list-right
		{
			p
			{
				border-radius: 20/28rem;
				border:1px solid #ff0036;
				color: #ff0036;
			}
		}
	}
	.lottery-help-product
	{
		background: #f7f7f7;
		img
		{
			width: 210/28rem;
			height: 225/28rem;
			object-fit: cover;
		}
	}

	.lottery-help-people
	{
		background: #fff;
/*		ul
		{
			display: flex;
			justify-content: flex-start;
			li
			{
				margin-right: 30/28rem;
				margin-left: 30/28rem;
				i
				{
					display: block;
					width: 85/28rem;
					height: 85/28rem;
					line-height: 85/28rem;
					object-fit: cover;
					border-radius: 50%;
					background: #dfdfdf;
					color: #a8a8a8;
				}
				img
				{
					display: block;
					width: 85/28rem;
					height: 85/28rem;
					object-fit: cover;
					border-radius: 50%;
				}
				span
				{
					display: block;
				}
			}
		}*/
		button
		{
			height: 80/28rem;
			line-height: 80/28rem;
			border-radius: 5px;
			width: 80%;
			display: block;
			margin-right: auto;
			margin-left: auto;
		}
		.join
		{
			border:1px solid #ff0036;
		}
		.count-down
		{
			max-width: 250/28rem;
			margin-right: auto;
			margin-left: auto;
			margin-top: 30/28rem;
			span{
				border-radius: 5/28rem;
			}
			.bg-red
			{
				background: #383838;
			}
			strong{
				i{
					display:block;
					width: 4/28rem;
					height: 4/28rem;
				}
			}
		}
	}
	.new-recommend
	{
		background: #f5f5f5;
		.recommend-list{
			.list-ul{
				li{
					width: 48%;
					img{
						height: 366/28rem;
					}
					.ellipsis-more{
						height: 80/28rem;
					}
					.count-down{
						span{
							background-color: #383838;
						}
						strong{
							i{
								background-color: #383838;
							}
						}
					}
					.experience{
						border-radius: 5/28rem;
						background-color: #ffdee5;
						padding:2/28rem 5/28rem;
						vertical-align: top;
					}
				}
			}
		}
	}
	.my-lotterty-box
	{
		z-index: 99;
		position: fixed;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%);
		background: rgba(0,0,0,.5);
		width: 100%;
		height: 100%;
		.my-lotterty
		{
			background: #fff;
			width: 80%;
			border-radius: 8px;
			position: relative;
			.status-img
				{
					width: 132/28rem;
					height: 128/28rem;
					position: absolute;
					top: 30/28rem;
					right: 30/28rem;
					z-index: 9;
					img
					{
						width: 100%;
						height: 100%;
						display: block;
						object-fit: cover;
					}
				}
				ul
				{
					overflow-y: scroll;
					height: 500/28rem;
					img
					{
						width: 80/28rem;
						height: 80/28rem;
						border-radius: 50%;
						object-fit: cover;
					}
				}
				i
				{
					position: absolute;
					top: -20/28rem;
					right: -20/28rem;
					background: #e5e5e5;
					font-size: 30/28rem;
					width: 54/28rem;
					height: 54/28rem;
					text-align: center;
					line-height: 54/28rem;
					border-radius: 50%;
					color: #666;
				}
			i
			{
				position: absolute;
				top: -20/28rem;
				right: -20/28rem;
				background: #e5e5e5;
				font-size: 30/28rem;
				width: 54/28rem;
				height: 54/28rem;
				text-align: center;
				line-height: 54/28rem;
				border-radius: 50%;
				color: #666;
			}
			h2
			{
				border-bottom: 1px solid #e5e5e5;
				text-align: center;
			}
			
		}
	}
	.help-share
	{
		z-index: 99;
		position: fixed;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,.8);
		width: 100%;
		height: 100%;
		img
		{
			width: 100%;
			display: block;
		}
		ul
		{
			position:fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			li
			{
				text-align: center;
				i
				{
					width: 100/28rem;
					height: 100/28rem;
					border-radius: 50%;
					line-height: 100/28rem;
					text-align: center;
					color: #fff;
					display: block;
					font-size: 60/28rem;
				}
				.weibo
				{
					background: #fe555f;
				}
				.wechat
				{
					background: #21cc51;
				}
				.qq
				{
					background: #65aef3
				}
				.circle
				{
					background: #9b8cc6;
				}
				span
				{
					font-size: 28/28rem;
					display: block;
					margin-top: 20/28rem;
				}
			}
		}
	}
	
}
</style>